<load href="__STATIC__/admin/vue/vue.js"/>
<load href="__STATIC__/admin/vue/vue-resource.min.js"/>
<link rel="stylesheet" type="text/css" href="/Static/admin/wechat/base2e46c8.css"/>
<link rel="stylesheet" href="/Static/admin/wechat/index2b2fad.css">
<link rel="stylesheet" type="text/css" href="/Static/admin/wechat/tooltip218878.css" />
<style>
    .emotion_editor .edit_area{
        padding:0;
    }
    .inner{width:95%}
    a{color:#000}
    a,a:link,a:hover{text-decoration:none}

</style>
<section style="width:60%;margin:10px auto" id="menu">
    <include file="Menu/template:menu"/>
    <include file="Menu/template:content"/>
    <include file="Menu/template:childcontent"/>

</section>
<script>


    var menu = new Vue({
        el: '#menu',
        data: {
            index: {parentid: 0, childid: 0}, //默认当前菜单选中位置
            selected: true, //false代表发送消息 true代表url
            menutype: true, //true主菜单 false代表子菜单
            hassub: false, //当前主菜单是否包含子菜单
            menus: [
                {
                    "type": "view",
                    "name": "主菜单",
                    "url": "http://v.qq.com/",
                    "text": "",
                    "key": "",
                    "sub_button": []
                },
                {
                    "type": "view",
                    "name": "主菜单",
                    "key": "",
                    "url": "http://v.qq.com/",
                    "text": "",
                    "sub_button": []
                },
                {
                    "type": "view",
                    "name": "主菜单",
                    "key": "",
                    "text": "",
                    "url": "http://v.qq.com/",
                    "sub_button": []
                }
            ],
            menuitem: {
                    "type": "view",
                    "name": "主菜单",
                    "key": "",
                    "text": "",
                    "url": "http://v.qq.com/",
                    "sub_button": []
                }
        },
        created: function () {
            this.$http.get('/Admin/System/getMenu')
            .then(
                function (res) {
                    if (res.data) {
                        this.menus = res.data;
                    }
                },
                function () {});
        },

        methods: {
            addchild: function (e) {
                var parentid = e.target.id;
                if (this.menus[parentid].sub_button.length >= 5) {
                    layer.msg("最多五个子菜单", {icon: 2});
                    return;
                }
                var child = {
                    "type": "view",
                    "name": "子菜单",
                    "key": "",
                    "text": "",
                    "url": ""
                };
                this.menus[parentid].sub_button.push(child);
                var json = JSON.stringify(this.menus);
            },
            //子菜单选择url 或 text处理
            selecturl: function (e) {
                this.selected = true;
                this.menus[this.index.parentid].sub_button[this.index.childid].type = "view";
            },
            selecttext: function (e) {
                this.selected = false;
                this.menus[this.index.parentid].sub_button[this.index.childid].type = "click";
                this.menus[this.index.parentid].sub_button[this.index.childid].key = 'key_' + this.index.parentid + '_' + this.index.childid;
            },
            //主菜单选择url 或 text处理
            pselecturl: function (e) {
                this.selected = true;
                this.menus[this.index.parentid].type = "view";
            },
            pselecttext: function (e) {
                this.selected = false;
                this.menus[this.index.parentid].type = "click";
                this.menus[this.index.parentid].key = 'key_' + this.index.parentid;
            },
            //选中菜单处理
            menuchild: function (e, pid, cid) {
                if (!pid && !cid) {
                    if (!this.check()) {
                        alert('菜单名称不能为空');
                        return false;
                    }
                }
                this.menutype = false;
                if (!pid || !cid) {
                    var pid = e.target.getAttribute("parentid");
                    var cid = e.target.getAttribute("childid");
                }
                this.index.parentid = pid;
                this.index.childid = cid;
                //判断当前菜单的类型 url or text
                var type = this.menus[this.index.parentid].sub_button[this.index.childid].type;
                if (type == "click") {
                    this.selected = false;
                } else {
                    this.selected = true;
                }
                childs = document.querySelectorAll(".child");
                this.removeclass(childs, 'current');
                var self = document.querySelectorAll("#child-" + pid + "-" + cid);
                this.addclass(self, 'current');
            },
            menuparent: function (e, pid) {
                if (!pid) {
                    if (!this.check()) {
                        alert('菜单名称不能为空');
                        return false;
                    }
                }
                this.menutype = true;
                if (!pid) {
                    var pid = e.target.getAttribute("parentid");
                }
                this.index.parentid = pid;
                //判断当前菜单的类型 url or text
                var type = this.menus[this.index.parentid].type;
                if (type == "click") {
                    this.selected = false;
                } else {
                    this.selected = true;
                }
                var sub = this.menus[this.index.parentid].sub_button.length;//子菜单个数
                if (sub > 0) {
                    this.hassub = true;
                } else {
                    this.hassub = false;
                }
                childs = document.querySelectorAll(".child");
                this.removeclass(childs, 'current');
                var self = document.querySelectorAll("#child-" + pid);
                this.addclass(self, 'current');
            },
            //删除子菜单
            deletemenu: function (p) {
                if(p) {
                    if(this.menus.length==1) {
                        return false;
                    }
                    this.menus.splice(this.index.parentid,1);
                    this.index = {parentid: 0, childid: 0};
                }else{
                    this.menus[this.index.parentid].sub_button.splice(this.index.childid, 1);
                    this.menuparent('', this.index.parentid);
                }
            },
            addclass: function (items, val) {
                for (var i = 0; i < items.length; i++) {
                    var item = items[i];
                    var oldclass = item.getAttribute('class');
                    var newclass = oldclass + " " + val;
                    item.setAttribute('class', newclass);
                }
            },
            removeclass: function (items, val) {
                for (var i = 0; i < items.length; i++) {
                    var item = items[i];
                    var oldclass = item.getAttribute('class');
                    var newclass = oldclass.replace(val, '');
                    item.setAttribute('class', newclass);
                }
            },
            //选择菜单时检查当前菜单名称是否为空
            check: function () {
                if (this.menutype) {
                    //当前为主菜单
                    if (!this.menus[this.index.parentid].name) {
                        return false;
                    } else {
                        return true;
                    }
                } else {
                    //当前为子菜单
                    if (!this.menus[this.index.parentid].sub_button[this.index.childid].name) {
                        return false;
                    } else {
                        return true;
                    }
                }
            },
            submit: function () {
                var json = JSON.stringify(this.menus);
                //console.log(json);
                var data = {};
                data.menus = json;
                layer.load();
                this.$http.post('/Admin/System/createmenu', data, {emulateJSON: true})
                .then(
                    function (res) {
                        if (res.data) {
                            layer.msg("创建成功", {icon: 1});
                        } else {
                            layer.msg("创建失败", {icon: 2});
                        }
                        layer.closeAll('loading');
                    },
                    function () {}
                );
            },
            addmenu: function () {
                if(this.menus.length>=3) {
                    return false;
                }
                this.menus.push(this.menuitem);
            }
        },
    })



</script>